<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div class="SceneryPoint_box">
    <div v-for="item in icon_data" :key="item" class="icon_box">
      <dv-border-box-10 v-if="item.info" class="active">
        <el-popover
          :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template #reference>
            <div class="icon_box_item">
              <svg-icon :name="item.name" :color="atiive_color" />
              <h3>{{ item.name }}</h3>
            </div>
          </template>
          <template #default>
            <div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
              <svg-icon :name="item.name" :color="atiive_color" />
              <h2>{{ item.name }}</h2>
              <div>
                <p class="demo-rich-content__name" style="margin: 0; font-weight: 500">Element Plus</p>
                <p
                  class="demo-rich-content__mention"
                  style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                >@element-plus</p>
              </div>

              <p class="demo-rich-content__desc" style="margin: 0">
                {{ item.info }}
              </p>
            </div>
          </template>
        </el-popover>
      </dv-border-box-10>
      <dv-border-box-7 v-else>
        <div class="icon_box_item">
          <svg-icon :name="item.name" :color="atiive_color" />
          <h3>{{ item.name }}</h3>
        </div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script setup lang="ts">
var icon_data = [
  { name: "卫生间" },
  { name: "餐饮" },
  { name: "便利店" },
  { name: "手机充电" },
  { name: "景区地图" },
  { name: "纪念品商店" },
  { name: "讲解器租赁" },
  { name: "雨具租赁" },
  { name: "母婴室" },
  { name: "自动售卖机" },
  { name: "童车租赁" },
  { name: "残疾通道" },
  { name: "轮椅租赁" },
  { name: "WIFI" }
];
var atiive_color = "yellow"
onMounted(() => {
  //   console.log("==", parent_list);
});
const props = defineProps<{
  name: String;
  icon_data: Array<any>;
}>();
const parent: any = ref(props.name);
const parent_list: Array<any> = ref(props.icon_data);
watch(
  () => props.icon_data,
  (newValue, oldValue) => {
    if (newValue) {
      props.icon_data.forEach(item1 => {
        icon_data.forEach(item2 => {
          if (item1.title == item2.name) {
            console.log(item2);
            item2.info = item1.info+'';
          }
        });
      });
      parent_list.value = props.icon_data;
    }
  }
);
</script>

<style lang="scss" scoped>
.SceneryPoint_box {
  background-color: rgb(80, 95, 90);
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .icon_box {
    // background-color: aquamarine;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    // padding-top: 10px;
    margin-left: 1%;
    // border: 1px solid red;
    // justify-content: center;
    // line-height: 100px;
    width: 30%;
    // background-color: cadetblue;
    height: 100px;
    .active {
      background-color: aqua;
    }
    // padding-bottom: 10px;
    .icon_box_item {
      cursor: pointer;
      // width: 50%;
      //   height: 100px;
      // border: 1px solid red;

      margin: 10px auto;
      // background-color: #fff;
      text-align: center;
    }
  }
}
</style>